<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <canvas width="1366" height="768">
        2、    save restore 的练习，配合图形变形的三个属性，translate scale rotate
    </canvas>
</body>
</html>
<script type="text/javascript">
    var context = document.querySelector("canvas").getContext("2d");
    context.save();// 1
        context.beginPath();
        context.fillStyle = "red";
        context.scale(0.5, 0.5);
        context.fillRect(0,0,100,100);
        context.closePath();
    context.save(); // 2
    context.restore();// 2

        context.beginPath();
        context.fillStyle = "yellow";
        context.translate(-100,-100);

        context.rotate(Math.PI/180 * 30);
        context.rotate(-Math.PI/180 * 35);
        // 相当于旋转了-5°
        context.fillRect(200,200,100,100);
        context.closePath();

    context.restore(); //1
        context.beginPath();
        context.strokeStyle = "blue";
        context.translate(866,268);
        context.strokeRect(400,400,100,100);
        context.closePath();

</script>